/*
 * @Author: xyq
 * @Date: 2021-02-02 14:30:50
 * @LastEditors: xyq
 * @LastEditTime: 2021-02-26 10:25:15
 * @FilePath: \little-eight\src\Component\Sider\index.jsx
 */
import React from 'react';
import { Layout, Menu } from 'antd';
import { NavLink, withRouter } from 'react-router-dom';
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2361999_mz60x1b0r3.js', // 在 iconfont.cn 上生成
});
import { observer, inject } from 'mobx-react';
const { Sider } = Layout;
const { SubMenu } = Menu;
@inject('current')
@observer
class siderNav extends React.Component {
  state = {
    SideNavData: [
      {
        key: 'shou',
        icon: 'iconsousuo',
        contName: '首页',
        path: '/Main/Home',
      },
      {
        key: 'sub1',
        icon: 'iconsousuo',
        contName: '系统管理',
        children: [
          {
            key: '1',
            icon: 'iconsousuo',
            contName: '人员管理',
            path: '/Main/System/personManage',
          },
          {
            key: '2',
            icon: '',
            contName: '菜单管理',
            path: '/Main/System/menuManage',
          },
          {
            key: '3',
            icon: 'iconsousuo',
            contName: '部门管理',
            path: '/Main/System/departmentManage',
          },
        ],
      },
      {
        key: 'sub2',
        icon: 'iconsousuo',
        contName: '项目管理',
        children: [
          {
            key: '4',
            icon: 'iconsousuo',
            contName: '项目列表',
            path: '/Main/Project/projectList',
          },
        ],
      },
      {
        key: 'sub3',
        icon: 'iconsousuo',
        contName: '款项管理',
        children: [
          {
            key: '5',
            icon: 'iconsousuo',
            contName: '审批列表',
            path: '/Main/MoneyManage/approveList',
          },
        ],
      },
    ],
  };
  renderSideNav = () => {
    return this.state.SideNavData.map(item => {
      if (item.children) {
        return (
          <SubMenu
            key={item.key}
            icon={<MyIcon style={{ color: 'white' }} type={item.icon} />}
            title={item.contName}
          >
            {item.children.map(ele => {
              return (
                <Menu.Item
                  key={ele.key}
                  icon={
                    ele?.icon !== '' ? (
                      <MyIcon style={{ color: 'white' }} type={ele?.icon} />
                    ) : (
                      <></>
                    )
                  }
                >
                  <NavLink to={ele.path}>{ele.contName}</NavLink>
                </Menu.Item>
              );
            })}
          </SubMenu>
        );
      } else {
        return (
          <Menu.Item key={item.key} icon={<MyIcon style={{ color: 'white' }} type={item.icon} />}>
            <NavLink to={item.path}>{item.contName}</NavLink>
          </Menu.Item>
        );
      }
    });
  };
  componentWillMount() {
    const { SideNavData } = this.state;
    const pathName = this.props.location.pathname;
    let obj = {
      navkey: '',
      subkey: '',
    };
    try {
      SideNavData.forEach(item => {
        if (item?.path === pathName) {
          obj.subkey = item.key;
          this.props.current.changeCurrent(obj);
          throw Error();
        }
        if (item?.children) {
          item.children.forEach(ele => {
            if (ele.path === pathName) {
              obj.navkey = item.key;
              obj.subkey = ele.key;
              this.props.current.changeCurrent(obj);
              throw Error();
            }
          });
        }
      });
    } catch (e) {}
  }
  render() {
    const { collapsed } = this.props;
    return (
      <>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="logo" />
          <Menu
            theme="dark"
            mode="inline"
            defaultOpenKeys={[this.props.current.showkey.navkey]}
            selectedKeys={[this.props.current.showkey.subkey]}
          >
            {this.renderSideNav()}
          </Menu>
        </Sider>
      </>
    );
  }
}

export default withRouter(siderNav);
